<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>信息总览</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="/static/css/mdb.min.css">
  <!-- Your custom styles (optional) -->
</head>

<body class="fixed-sn white-skin">

<!-- Main Navigation -->
<header>

  <!-- Sidebar navigation -->
  <div id="slide-out" class="side-nav sn-bg-4 fixed">
    <ul class="custom-scrollbar">

      <!-- Logo -->
      <li class="logo-sn waves-effect py-3">
        <div class="text-center" style="background-color: #773399; border-radius: 5px; margin: 0 5px;">
          <a href="#" class="pl-md-1"><strong style="color: white">欧桥数字化管理系统</strong></a>
        </div>
      </li>

       <!-- Side navigation links -->
      <li style="top: -20px; position: relative;">
        <ul class="collapsible collapsible-accordion">
          <li class="active" style="background-color: #86cfda">
            <a href="/" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-th-large"></i>总&nbsp;&nbsp;&nbsp;&nbsp;览</a>
          </li>
          <li>
            <a href="/datas/partyMember" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-user-tie"></i>党&nbsp;&nbsp;&nbsp;&nbsp;员</a>
          </li>
          <li>
            <a href="/datas/villager" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-users"></i>村&nbsp;&nbsp;&nbsp;&nbsp;民</a>
          </li>

          <li>
            <a href="/datas/women" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-female"></i>妇&nbsp;&nbsp;&nbsp;&nbsp;女</a>
          </li>
          <li>
            <a href="/datas/newCitizen" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-male fa-2x"></i>新市民</a>
          </li>

          <li>
            <a href="/datas/religion" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-church"></i>宗&nbsp;&nbsp;&nbsp;&nbsp;教</a>
          </li>

          <li>
            <a href="/datas/enterprise" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-building"></i>企&nbsp;&nbsp;&nbsp;&nbsp;业</a>
          </li>

          <li>
            <a href="/datas/nine" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-truck-moving"></i>九&nbsp;&nbsp;&nbsp;&nbsp;小</a>
          </li>


          <li>
            <a href="/datas/lowIncome" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-id-badge"></i>低&nbsp;&nbsp;&nbsp;&nbsp;保</a>
          </li>

          <li>
            <a href="/datas/agricultural" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-seedling"></i>农&nbsp;&nbsp;&nbsp;&nbsp;业</a>
          </li>

          <li>
            <a href="/datas/environment" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-cloud-moon"></i>环&nbsp;&nbsp;&nbsp;&nbsp;境</a>
          </li>
          <li>
            <a href="/datas/handicapped" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-wheelchair"></i>残疾人</a>
          </li>

          <li>
            <a href="/datas/veterans" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-user-injured"></i>退役军人</a>
          </li>
          <li>
            <a href="/datas/project" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-snowplow"></i>工程管理</a>
          </li>

          <li>
            <a href="/datas/assert" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-yen-sign"></i>资产管理</a>
          </li>
          <li>
            <a href="/datas/lowIncomeMargin" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-street-view"></i>低保边缘</a>
          </li>

          <li>
            <a href="/datas/lowIncomeFamily" class="collapsible-header waves-effect"><i
                class="w-fa fas fa-user-friends"></i>低收入家庭</a>
          </li>
        </ul>
      </li>
      <!-- Side navigation links -->

    </ul>
    <div class="sidenav-bg mask-strong"></div>
  </div>
  <!-- Sidebar navigation -->

  <!-- Navbar -->
  <nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">

    <!-- SideNav slide-out button -->
    <div class="float-left">
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
    </div>

    <!-- Breadcrumb -->
    <div class="breadcrumb-dn mr-auto">
      <p></p>
    </div>

    <div class="d-flex change-mode">

      <!-- Navbar links -->
      <ul class="nav navbar-nav nav-flex-icons ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown"
             aria-haspopup="true" aria-expanded="false">
            <span class="clearfix d-none d-sm-inline-block">
              <i class="fas fa-user"></i>
              {% if request.session.user_info %}
                {{ request.session.user_info.fullname }}
              {% else %}
                <span onclick="location.href='/users/login/'">登录</span>
              {% endif %}
            </span>
          </a>
          {% if request.session.user_info %}
            <div class="dropdown-menu dropdown-menu-right align-content-center" aria-labelledby="userDropdown">
              <a class="dropdown-item" href="#"><i class="fas fa-user" style="margin-right: 15px"></i>个人信息</a>
              <a class="dropdown-item" href="/users/logout/">
                <i class="fas fa-sign-out-alt" style="margin-right: 15px"></i>退出登录</a>
            </div>
          {% endif %}
        </li>
      </ul>
      <!-- Navbar links -->

    </div>

  </nav>
  <!-- Navbar -->

  <!-- Fixed button -->
  <div class="fixed-action-btn clearfix d-none d-xl-block" style="bottom: 45px; right: 24px;">

    <a class="btn-floating btn-lg red">
      <i class="fas fa-pencil-alt"></i>
    </a>

    <ul class="list-unstyled">
      <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
      <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
      <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
    </ul>

  </div>
  <!-- Fixed button -->

</header>
<!-- Main Navigation -->

<!-- Main layout -->
<main>

  <div class="container-fluid">

    <!-- Section: Intro -->
    <section class="mt-md-4 pt-md-2 mb-5 pb-4">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-xl-3 col-md-6 mb-xl-0 mb-4">

          <!-- Card -->
          <div class="card card-cascade cascading-admin-card">

            <!-- Card Data -->
            <div class="admin-up">
              <i class="fas fa-users primary-color mr-3 z-depth-2"></i>
              <div class="data">
                <p class="text-uppercase">村民总数</p>
                <h4 class="font-weight-bold dark-grey-text">7000</h4>
              </div>
            </div>

            <!-- Card content -->
            <div class="card-body card-body-cascade">
              <div class="progress mb-3">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">男性占比 (25%)</p>
            </div>

          </div>
          <!-- Card -->

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-3 col-md-6 mb-xl-0 mb-4">

          <!-- Card -->
          <div class="card card-cascade cascading-admin-card">

            <!-- Card Data -->
            <div class="admin-up">
              <i class="fas fa-user-tie warning-color mr-3 z-depth-2"></i>
              <div class="data">
                <p class="text-uppercase">党员人口</p>
                <h4 class="font-weight-bold dark-grey-text">600</h4>
              </div>
            </div>

            <!-- Card content -->
            <div class="card-body card-body-cascade">
              <div class="progress mb-3">
                <div class="progress-bar red accent-2" role="progressbar" style="width: 25%" aria-valuenow="25"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">党员占比 (25%)</p>
            </div>

          </div>
          <!-- Card -->

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-3 col-md-6 mb-md-0 mb-4">

          <!-- Card -->
          <div class="card card-cascade cascading-admin-card">

            <!-- Card Data -->
            <div class="admin-up">
              <i class="fas fa-building light-blue lighten-1 mr-3 z-depth-2"></i>
              <div class="data">
                <p class="text-uppercase">企业数量</p>
                <h4 class="font-weight-bold dark-grey-text">30</h4>
              </div>
            </div>

            <!-- Card content -->
            <div class="card-body card-body-cascade">
              <div class="progress mb-3">
                <div class="progress-bar red accent-2" role="progressbar" style="width: 75%" aria-valuenow="75"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">个体户占比(75%)</p>
            </div>

          </div>
          <!-- Card -->

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-xl-3 col-md-6 mb-0">

          <!-- Card -->
          <div class="card card-cascade cascading-admin-card">

            <!-- Card Data -->
            <div class="admin-up">
              <i class="fas fa-church red accent-2 mr-3 z-depth-2"></i>
              <div class="data">
                <p class="text-uppercase">宗教数量</p>
                <h4 class="font-weight-bold dark-grey-text">2000</h4>
              </div>
            </div>

            <!-- Card content -->
            <div class="card-body card-body-cascade">
              <div class="progress mb-3">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">迁入人口占比(30%)</p>
            </div>

          </div>
          <!-- Card -->

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </section>
    <!-- Section: Intro -->

    <!-- Section: Main panel -->
    <section class="mb-5">

      <!-- Card -->
      <div class="card card-cascade narrower">

        <!-- Section: Chart -->
        <section>

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-xl-5 col-lg-12 mr-0 pb-2">

              <!-- Card image -->
              <div class="view view-cascade gradient-card-header light-blue lighten-1">
                <h2 class="h2-responsive mb-0 font-weight-500">工程情况</h2>
              </div>

              <!-- Card content -->
              <div class="card-body card-body-cascade pb-0">
                <div class="row">
                  <div class="col-md-6">
                    <p class="lead">
                        <span class="badge primary-color p-3">
                          <i class="w-fa fas fa-list-ol z-depth-2" style="margin-right: 10px"></i>
                          工程总数
                        </span>
                    </p>
                  </div>
                  <div class="col-md-4">
                    <p class="lead"><span class="badge success-color p-3">20 个</span></p>
                  </div>
                  <div class="col-md-6">
                    <p class="lead">
                        <span class="badge info-color p-3">
                          <i class="w-fa fas fa-yen-sign z-depth-2" style="margin-right: 10px"></i>
                          工程金额
                        </span>
                    </p>
                  </div>
                  <div class="col-md-4">
                    <p class="lead"><span class="badge default-color p-3">2021334.23元</span></p>
                  </div>
                  <div class="col-md-6">
                    <p class="lead">
                        <span class="badge danger-color p-3">
                          <i class="w-fa fas fa-adjust z-depth-2" style="margin-right: 10px"></i>
                          工程进度
                        </span>
                    </p>
                  </div>
                  <div class="col-md-4">
                      <span class="min-chart my-4" id="chart-sales" data-percent="76">
                        <span class="percent"></span>
                      </span>
                  </div>
                </div>
              </div>
              <!-- Card content -->

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-xl-7 col-lg-12 mb-4 pb-2">

              <!-- Chart -->
              <div class="view view-cascade gradient-card-header blue-gradient">
                <canvas id="project_charts" height="350" width="450"></canvas>
              </div>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Chart -->

      </div>
      <!-- Card -->
    </section>
    <!-- Section: Main panel -->

  </div>

</main>
<!-- Main layout -->

<!-- Footer -->
<footer class="page-footer pt-0 mt-5 rgba-stylish-light">

  <!-- Copyright -->
  <div class="footer-copyright py-3 text-center">
    <div class="container-fluid">
      © 2021 Copyright: <a href="#"> oqiao-master </a>
    </div>
  </div>

</footer>
<!-- Footer -->

<!-- SCRIPTS -->
<!-- JQuery -->
<script src="/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/static/js/mdb.min.js"></script>
<!-- echarts -->
<script type="text/javascript" src="/static/js/exporting.js"></script>
<script type="text/javascript" src="/static/js/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>

<!-- Initializations -->
<script>
  // SideNav Initialization
  $(".button-collapse").sideNav();

  var container = document.querySelector('.custom-scrollbar');
  var ps = new PerfectScrollbar(container, {
    wheelSpeed: 2,
    wheelPropagation: true,
    minScrollbarLength: 20
  });

  // Data Picker Initialization
  $('.datepicker').pickadate();

  // Material Select Initialization
  $(document).ready(function () {
    $('.mdb-select').material_select();
  });

  // Tooltips Initialization
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })

</script>

<!-- Charts -->
<script>
  // Small chart
  $(function () {
    $('.min-chart#chart-sales').easyPieChart({
      barColor: "#FF5252",
      onStep: function (from, to, percent) {
        $(this.el).find('.percent').text(Math.round(percent));
      }
    });
  });

  // Main chart
  var ctxL = document.getElementById("lineChart").getContext('2d');
  var myLineChart = new Chart(ctxL, {
    type: 'line',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        fillColor: "#fff",
        backgroundColor: 'rgba(255, 255, 255, .3)',
        borderColor: 'rgba(255, 255, 255)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    },
    options: {
      legend: {
        labels: {
          fontColor: "#fff",
        }
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: true,
            color: "rgba(255,255,255,.25)"
          },
          ticks: {
            fontColor: "#fff",
          },
        }],
        yAxes: [{
          display: true,
          gridLines: {
            display: true,
            color: "rgba(255,255,255,.25)"
          },
          ticks: {
            fontColor: "#fff",
          },
        }],
      }
    }
  });

  $(function () {
    $('#dark-mode').on('click', function (e) {

      e.preventDefault();
      $('h4, button').not('.check').toggleClass('dark-grey-text text-white');
      $('.list-panel a').toggleClass('dark-grey-text');

      $('footer, .card').toggleClass('dark-card-admin');
      $('body, .navbar').toggleClass('white-skin navy-blue-skin');
      $(this).toggleClass('white text-dark btn-outline-black');
      $('body').toggleClass('dark-bg-admin');
      $('h6, .card, p, td, th, i, li a, h4, input, label').not(
        '#slide-out i, #slide-out a, .dropdown-item i, .dropdown-item').toggleClass('text-white');
      $('.btn-dash').toggleClass('grey blue').toggleClass('lighten-3 darken-3');
      $('.gradient-card-header').toggleClass('white black lighten-4');
      $('.list-panel a').toggleClass('navy-blue-bg-a text-white').toggleClass('list-group-border');

    });
  });

</script>

<script>
  let chartDom = document.getElementById('project_charts');
  let myChart = echarts.init(chartDom);
  let option;

  option = {
    grid: {
      left: '15%',
      right: '15%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'red'
        }
      },
      show:true
    },
    toolbox: {
      feature: {
        dataView: {show: false, readOnly: false},
        magicType: {show: false, type: ['line', 'bar']},
        restore: {show: false},
        saveAsImage: {show: false}
      }
    },
    legend: {
      data: ['项目进度', '项目金额']
    },
    xAxis: [
      {
        type: 'category',
        data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六', '项目七'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '项目进度',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      },
      {
        type: 'value',
        name: '项目金额',
        min: 0,
        axisLabel: {
          formatter: '{value} 元'
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '项目进度',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23, 25, 76, 13.6],
        itemStyle: {
          normal: {
            color: function (params) {
              let colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
              return colorList[params.dataIndex]
            }
          }
        }
      },
      {
        name: '项目金额',
        type: 'line',
        yAxisIndex: 1,
        data: [26, 59, 90, 264, 287, 707, 1756]
      },
    ]
  };

  option && myChart.setOption(option);
</script>

</body>

</html>
